<template>
	<view class="select-street-page">
		<view class="area-wrap">
			<scroll-view scroll-y="true" class="scroll-area">
				<view v-for="item in jinhuaTree" :key="item.id" class="area-item"
					:class="{'active-area': selectArea.id===item.id}"
					@click="handleSelectArea(item)">
					{{item.departName}}
				</view>
			</scroll-view>
		</view>
		<view class="street-wrap">
			<scroll-view v-show="streetList.length" scroll-y="true"
				class="scroll-street">
				<view v-for="item in streetList" :key="item.id" class="street-item"
					:class="{'active-street': selectStreet.id===item.id}"
					@click="handleSelectStreet(item)">
					{{item.departName}}
				</view>
			</scroll-view>
		</view>
		<view class="street2-wrap">
			<scroll-view v-show="streetList2.length" scroll-y="true"
				class="scroll-street">
				<view v-for="item in streetList2" :key="item.id" class="street-item"
					:class="{'active-street': selectStreet2.id===item.id}"
					@click="handleSelectStreet2(item)">
					{{item.departName}}
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import {getLoactionTree2} from '@/api/system.js';
	export default {
		data() {
			return {
				selectArea: {
					id: '',
					title: '',
				},
				selectStreet: {
					id: '',
					title: '',
				},
				selectStreet2: {
					id: '',
					title: '',
				},
				eventChannel: null,
				jinhuaTree: null,
				streetList: [],
				streetList2: [],
			}
		},
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel();
			this.eventChannel = eventChannel;
			eventChannel.on('selectArea', (data) => {
				this.selectStreet2 = data;
				this.handleGetLoacationTree();
			})
		},
		onUnload() {
			this.eventChannel.off('selectArea');
		},
		methods: {
			async handleGetLoacationTree() {
				try {
					const res = await getLoactionTree2();
					const jinhuaTree = res.data.result[0].children|| [];
					this.jinhuaTree = jinhuaTree;
					const streetId = this.selectStreet.id||'';
					const streetId2 = this.selectStreet2.id||'';
					if(streetId){
						jinhuaTree.map(area=>{
							if(area.children.some(item=>item.id ===streetId )){
								this.streetList = area.children;
								this.selectArea = {id:area.id,title:area.id};
							}
						})
					}
					if(streetId2){
						streetList.map(area=>{
							if(area.children.some(item=>item.id ===streetId2 )){
								this.streetList2 = area.children;
								this.selectStreet = {id:area.id,title:area.id};
							}
						})
					}
					console.log('jinhuaTree', jinhuaTree);
				} catch (e) {
					//TODO handle the exception
				}
			},
			handleSelectArea(area) {
				this.selectArea.id = area.id;
				this.selectArea.title = area.departName;
				this.streetList = area.children;
			},
			handleSelectStreet(street) {
				this.selectStreet.id = street.id;
				this.selectStreet.title = street.departName;
				this.streetList2 = street.children;
				console.log(street.children);
				if(street.children.length==0){
					uni.navigateBack({
						success: () => {
							this.eventChannel.emit('selectedArea', [this.selectStreet,this.selectArea]);
						}
					})
				}
				
			},
			handleSelectStreet2(street) {
				this.selectStreet2.id = street.id;
				this.selectStreet2.title = street.departName;
				uni.navigateBack({
					success: () => {
						this.eventChannel.emit('selectedArea', [this.selectStreet2,this.selectStreet]);
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.select-street-page {
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
		height: 100vh;
	}

	.area-wrap {
		width: 250rpx;
		background: #FFFFFF;
	}

	.scroll-area {
		box-sizing: border-box;
		height: 100%;
		padding: 8rpx 0 100rpx;
	}

	.area-item {
		position: relative;
		padding: 32rpx 40rpx;
		font-size: 32rpx;
		color: #000000e6;
	}

	.active-area {
		color: #3576F2;
		&:before{
			content: ' ';
			display: block;
			position: absolute;
			top: 34rpx;
			left: 0;
			width: 8rpx;
			height: 40rpx;
			background: #3576F2;
		}
	}

	.street-wrap {
		flex: 1;
	}

	.scroll-street {
		box-sizing: border-box;
		height: 100%;
		padding: 8rpx 0 100rpx;
	}

	.street-item {
		padding: 32rpx 70rpx;
		font-size: 32rpx;
		color: #666666;
	}

	.active-street {
		color: #3576F2;
	}
</style>